ul {
  margin: 100px;
}
ul li {
  position: relative;
  width: 120px;
  height: 35px;
  list-style: none;
  perspective: 500px;
}
.box {
  width: 100%;
  height: 100%;
  transition: all 0.3s;
  transform-style: preserve-3d;
}
.box:hover {
  transform: rotateX(90deg);
}
.front,
.bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.front {
  background-color: pink;
  z-index: 1;
  transform: translateZ(17.5px);
}
.bottom {
  background-color: skyblue;
  transform: translateY(50%) rotateX(-90deg);
}
